<div class="ant-transfer-list-header">
  <label nz-checkbox [nzChecked]="stat.checkAll" (nzCheckedChange)="onHandleSelectAll($event)"
    [nzIndeterminate]="stat.checkHalf" [nzDisabled]="stat.shownCount == 0 || disabled">
  </label>
  <span class="ant-transfer-list-header-selected">
    <span>{{ (stat.checkCount > 0 ? stat.checkCount + '/' : '') + stat.shownCount }} {{ dataSource.length > 1 ? itemsUnit : itemUnit }}</span>
    <span *ngIf="titleText" class="ant-transfer-list-header-title">{{ titleText }}</span>
  </span>
</div>
<div class="{{showSearch ? 'ant-transfer-list-body ant-transfer-list-body-with-search' : 'ant-transfer-list-body'}}"
  [ngClass]="{'ant-transfer__nodata': stat.shownCount === 0}">
  <div *ngIf="showSearch" class="ant-transfer-list-body-search-wrapper">
    <div nz-transfer-search
      (valueChanged)="handleFilter($event)"
      (valueClear)="handleClear()"
      [placeholder]="searchPlaceholder"
      [disabled]="disabled"
      [value]="filter"></div>
  </div>
  <ul class="ant-transfer-list-content">
    <ng-container *ngFor="let item of dataSource">
      <li *ngIf="!item._hiden"
        class="ant-transfer-list-content-item" [ngClass]="{'ant-transfer-list-content-item-disabled': disabled || item.disabled}">
        <label nz-checkbox [nzChecked]="item.checked" (nzCheckedChange)="_handleSelect(item)" [nzDisabled]="disabled || item.disabled">
          <ng-container *ngIf="!render; else renderContainer">{{ item.title }}</ng-container>
          <ng-template #renderContainer [ngTemplateOutlet]="render" [ngTemplateOutletContext]="{ $implicit: item }"></ng-template>
        </label>
      </li>
    </ng-container>
  </ul>
  <div *ngIf="dataSource.length === 0" class="ant-transfer-list-body-not-found">
    <nz-embed-empty [nzComponentName]="'transfer'" [specificContent]="notFoundContent"></nz-embed-empty>
  </div>
</div>
<div *ngIf="footer" class="ant-transfer-list-footer">
  <ng-template [ngTemplateOutlet]="footer" [ngTemplateOutletContext]="{ $implicit: direction }"></ng-template>
</div>